<template>
	<div class="setting">
		<div class="title">店铺信息</div>
		<el-form :model="settingForm" :rules="rules" ref="settingForm" label-width="90px">
			<el-row>
				<el-col :span="8" :gutter="20">
					<el-form-item label="店铺名:" prop="store_name"><el-input v-model="settingForm.store_name"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="客服电话:" prop="service_phone"><el-input v-model="settingForm.service_phone"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="价格系数:" prop="coefficient"><el-input 
					type="number"
					placeholder="请输入价格系数"
					clearable
					v-model="settingForm.coefficient"></el-input></el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="省:" prop="province">
						<el-select v-model="settingForm.province" placeholder="省" @change="province">
							<el-option v-for="item in cityJson" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="市:" prop="city">
						<el-select v-model="settingForm.city" placeholder="市" @change="citySelect">
							<el-option v-for="item in cityList1" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="区:" prop="area">
						<el-select v-model="settingForm.area" placeholder="区">
							<el-option v-for="item in areaList1" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				
				<el-col :span="8" :gutter="20">
					<el-form-item label="地址:" prop="address"><el-input v-model="settingForm.address"></el-input></el-form-item>
				</el-col>
				
				<el-col :span="8">
					<el-form-item label="注册人:" prop="contract_name"><el-input v-model="settingForm.contract_name"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="注册人电话:" prop="contract_phone"><el-input v-model="settingForm.contract_phone"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="对接人:" prop="linkman"><el-input v-model="settingForm.linkman"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="对接人电话:" prop="linkman_phone"><el-input v-model="settingForm.linkman_phone"></el-input></el-form-item>
				</el-col>
				
				<el-col :span="8">
					<el-form-item label="设计师名称:" prop=""><el-input v-model="settingForm.designer_name"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="设计师电话:" prop=""><el-input v-model="settingForm.designer_phone"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="财务名称:" prop=""><el-input v-model="settingForm.finance_name"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="财务电话:" prop=""><el-input v-model="settingForm.finance_phone"></el-input></el-form-item>
				</el-col>
				
				<el-col :span="6">
					<el-form-item label="指定物流:" prop=""><el-input v-model="settingForm.appoint_logistics"></el-input></el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-form-item label="商品简介:"><el-input type="textarea" v-model="settingForm.brief" rows="3"></el-input></el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="合同备注:">
					<quill-editor class="ql-editor" ref="myQuillEditor" v-model="settingForm.contract_desc" :options="editorOption"></quill-editor>
				</el-form-item>
			</el-row>
			<div class="title">
				店铺LOGO
				<el-tag type="primary">图片仅限JPG\PNG格式，图片大小≤500KB</el-tag>
			</div>
			<el-form-item>
				<el-upload
					class="avatar-uploader"
					ref="upload"
					action="fakeaction"
					:show-file-list="false"
					:http-request="function(res) {return upload(1, res);}"
					multipleaccept="image/*">
					<el-image v-if="settingForm.store_logo" :src="settingForm.store_logo" class="avatar" fit="cover" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
				<el-button type="primary" size="small" @click="rest('logo')">重置</el-button>
			</el-form-item>
			<!-- <div class="title">
				店铺背景图
				<el-tag type="primary">仅限JPG\PNG的长方形图片，图片大小≤500KB</el-tag>
			</div>
			<el-form-item>
				<div class="bg">
					<el-upload
						class="avatar-uploader"
						ref="upload"
						action="fakeaction"
						:show-file-list="false"
						:http-request="function(res) {return upload(2, res);}"
						multipleaccept="image/*">
						<el-image v-if="settingForm.backgroundimg" :src="settingForm.backgroundimg" class="avatar" fit="contain" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<el-button type="primary" size="small" @click="rest('bg')">重置</el-button>
				</div>
			</el-form-item> -->
			<el-form-item><el-button type="primary" @click="submitForm('settingForm')">确定</el-button></el-form-item>
		</el-form>
	</div>
</template>

<script>
import md5 from 'md5'
import 'quill/dist/quill.core.css'; // import styles
import 'quill/dist/quill.snow.css'; // for snow theme
import 'quill/dist/quill.bubble.css'; // for bubble theme
import { quillEditor, Quill } from 'vue-quill-editor';
import { container , addQuillTitle} from 'quill-video-image-module';
import { ImageExtend, QuillWatch } from 'quill-video-image-module';
import { VideoExtend, QuillVideoWatch } from 'quill-video-image-module';

// 引入video模块并注册
import video from 'quill-video-image-module/video';
Quill.register(video, true);

Quill.register('modules/ImageExtend', ImageExtend);
Quill.register('modules/VideoExtend', VideoExtend);

import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

export default {
	props: {
		layerid: {
			type: String,
			default: ''
		}
	},
	components: { quillEditor,Quill,ImageExtend,VideoExtend,addQuillTitle },
	data() {
		return {
			cityJson: '',
			cityList1: '',
			areaList1: '',
			settingForm: {
				store_id: localStorage.getItem('shop_id'),
				store_name: '',
				service_phone: '',
				linkman: '',
				linkman_phone: '',
				address:'',
				brief: '',
				store_logo: '',
				backgroundimg: '',
				coefficient:1,
				province: '',
				city: '',
				area: '',
				designer_name: '',
				designer_phone: '',
				finance_name: '',
				finance_phone: '',
				appoint_logistics: '',
				contract_desc:''
			},
			rules: {
				store_name: [{ required: true, message: '请输入店铺名' }],
				service_phone: [{ required: true, message: '请输入客服电话' }],
				coefficient: [{ required: true, message: '请输入价格系数' }],
				province: [{ required: true, message: '请选择省份' }],
				city: [{ required: true, message: '请选择城市' }],
				area: [{ required: true, message: '请选择地区' }],
				contract_name: [{ required: true, message: '请填写注册人名字' }],
				contract_phone: [{ required: true, message: '请填写注册人号码' }],
				linkman: [{ required: true, message: '请填写联系人名字' }],
				linkman_phone: [{ required: true, message: '请填写联系人号码' }],
			},

			editorOption: {
				modules: {
					imageResize: {},
					ImageExtend: {
						loading: true, // 可选参数 是否显示上传进度和提示语
						name: 'file[]', // 图片参数名
						size: 1, // 可选参数 图片大小，单位为M，1M = 1024kb
						action: `${this.$domain}api/Upimg/UpImg`, // 服务器地址, 如果action为空，则采用base64插入图片
						// response 为一个函数用来获取服务器返回的具体图片地址
						// 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
						// 则 return res.data.url
						response: res => {
							return res.datas[0];
						},
						headers: () => {}, // 可选参数 设置请求头部
						start: () => {}, // 可选参数 自定义开始上传触发事件
						end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
						error: () => {}, // 可选参数 自定义网络错误触发的事件
						change: (xhr, formData) => {
							formData.append('timestamp', Math.round(new Date() * 1000));
							formData.append('port', 'pc');
							formData.append('sign', this.getSign());
							formData.append('key', localStorage.getItem('token'));
						}, // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
						sizeError: () => {
							this.$message({
								message: '图片不能大于1M',
								type: 'warning'
							});
						}
					},
					VideoExtend: {
						loading: true,
						name: 'file[]',
						size: 100, // 可选参数 视频大小，单位为M，1M = 1024kb
						action: `${this.$domain}api/Upimg/UpVideo`, // 视频上传接口
						headers: xhr => {
							// set custom token(optional)
						},
						response: res => {
							// video uploaded path
							// custom your own
							return res.datas;
						},
						change: (xhr, formData) => {
							formData.append('timestamp', Math.round(new Date() * 1000));
							formData.append('port', 'pc');
							formData.append('sign', this.getSign());
							formData.append('key', localStorage.getItem('token'));
						}, // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
						sizeError: () => {
							this.$message({
								message: '视频不能大于100M',
								type: 'warning'
							});
						}
					},
					toolbar: {
						container: container, // container为工具栏，此次引入了全部工具栏，也可自行配置
						handlers: {
							image: function() {
								// 劫持原来的图片点击按钮事件
								QuillWatch.emit(this.quill.id);
							},
							video: function() {
								QuillVideoWatch.emit(this.quill.id);
							}
						}
					}
				}
			}
		};
	},
	methods: {
		getSign(){
			let data = {
				key:localStorage.getItem('token'),
				timestamp:Math.round(new Date() * 1000),
				port:'pc'
			}
		// 获取签名开始
		let obj = 'jjds2020+'
		let newObj = this.objKeySort(data)
		for (let i in newObj){
			obj += i + '=' + newObj[i] +'&'
		}
		obj = obj.substring(0, obj.length - 1)
		obj += '+jjds2020'
		obj = md5(obj)
		return obj
		},
			// 参数排序
		 objKeySort(obj) {
			var newkey = Object.keys(obj).sort();
			var newObj = {};
			for (var i = 0; i < newkey.length; i++) {
					newObj[newkey[i]] = obj[newkey[i]];
			}
			return newObj;
		},
		init() {
			this.cityJson = require('@/utils/city.json');
			// 店铺信息
			let sdata = {
				store_id: localStorage.getItem('shop_id')
			};
			this.$http(this.$ApiList.StoreInfo, sdata).then(res => {
				if (res.datas == null) {
					return
				}
				this.settingForm = res.datas;
				
				for (let i in this.cityJson) {
					if (this.cityJson[i].areaId == this.settingForm.province) {
						this.cityList1 = this.cityJson[i].cities;
					}
				}
				for (let j in this.cityList1) {
					if (this.cityList1[j].areaId == this.settingForm.city) {
						this.areaList1 = this.cityList1[j].cities;
					}
				}
			});
		},
		// 图片上传
		upload(type, params) {
			const file = params.file,
				fileType = file.type,
				isJPGPNG = file.type === 'image/jpeg' || 'image/png',
				isLt1MB = file.size / 1024 <= 1024;
			if (!isJPGPNG) {
				this.$message.error('只能上传图片格式png、jpg!');
				return;
			}
			if (!isLt1MB) {
				this.$message.error('图片不能大于1M');
				return;
			}
			const form = new FormData();
			form.append('file[]', file);
			this.$http(this.$ApiList.publicUpload, form).then(res => {
				if (res.code == 200) {
					switch (Number(type)) {
						case 1:
							this.settingForm.store_logo = res.datas[0];
							break;
						case 2:
							this.settingForm.backgroundimg = res.datas[0];
							break;
					}
				}
			});
		},

		rest(e) {
			if (e === 'logo') {
				this.settingForm.store_logo = '';
			} else {
				this.settingForm.backgroundimg = '';
			}
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					if(this.settingForm.coefficient < 0.5){
						this.$layer.msg('请输入正确的价格系数（不能小于0.5）');
						return
					}	
					this.$http(this.$ApiList.UpStore, this.settingForm).then(res => {
							this.$layer.msg('修改成功');
							this.$parent.init()
							this.cancel()
					});
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		cancel() {
			this.$layer.close(this.layerid);
		},
		province() {
			for (let i in this.cityJson) {
				if (this.cityJson[i].areaId == this.settingForm.province) {
					this.cityList1 = this.cityJson[i].cities;
				}
			}
			this.settingForm.city = this.cityList1[0].areaId;
			this.citySelect();
		},
		citySelect() {
			for (let i in this.cityList1) {
				if (this.cityList1[i].areaId == this.settingForm.city) {
					this.areaList1 = this.cityList1[i].counties;
				}
			}
			this.settingForm.area = this.areaList1[0].areaId;
		}
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss">
.setting {
	padding: 20px;
	flex: 1;
	.avatar-uploader {
		display: inline-block;
		vertical-align: bottom;
		margin-right: 20px;
	}
	.bg {
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 150px;
			height: 100px;
			line-height: 100px;
			text-align: center;
		}
		.avatar {
			width: 150px;
			height: 100px;
			display: block;
		}
	}
	.el-form-item {
		display: block;
		.el-form-item__content {
			display: block;
		}
		&:last-child {
			margin-bottom: 20px;
		}
	}
	.el-form-item__content{
		margin-left: 100px!important;
	}
	.el-form-item__label{
		width: 100px!important;
	}
	.quill-editor{
		padding: 0px;
	}
}
</style>
